<template>
    <div class="info" v-show="show">
        <transition name="el-zoom-in-center">
            <div class="my-image" v-show="show">
                <el-image :src="image" fit="contain"></el-image>
                <i class="del mouse-active" @click="del"></i>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        image: {
            type: String,
            default: ''
        }
    },
    methods: {
        del() {
            this.$emit('del')
        }
    }
}
</script>

<style lang="less" scoped>
.info {
    z-index: 999;
    width: 51.2rem;
    background: rgba(197, 197, 202, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;

    .my-image {
        max-width: 32rem;
        max-height: 32rem;
        margin-top: 4.27rem;
        margin-bottom: 4.27rem;
        position: relative;

        .el-image {
            width: 100%;
            height: 100%;
        }

        .del {
            z-index: 999;
            width: 1.44rem;
            height: 1.44rem;
            background: url('@/assets/img/del.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 0.43rem;
            top: 0.43rem;
        }

    }
}
</style>